<script setup lang="ts" name="CreateTimestamp">
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const emits = defineEmits(['back'])
/*========================================>( 模型属性 )<========================================*/
//是否显示此模块
const show = ref<boolean>(false)
//本组件表单
const timestampForm = ref<{ [key: string]: any }>({
    datetime: undefined
})

/*========================================>( 作用域属性 )<========================================*/
//表单校验规则
const _rules: { [key: string]: any } = {
    datetime: [
        { required: true, message: '请选择日期时间', trigger: ['blur', 'change'] }
    ],
}

/*========================================>( dom属性 )<========================================*/
const domTimestampForm = ref()

/*========================================>( 普通方法 )<========================================*/
//关闭modal
const cancel = () => {
    emits('back', {})
}

//重置表单
const resetForm = () => {
    timestampForm.value?.resetFields()
}

//监听各种操作
const handleSubmit = () => {
    domTimestampForm.value.validate((vaild: boolean) => {
        if (vaild) {
            proxy?.$modal.notifySuccess('生成成功')
            emits('back', { result: timestampForm.value.datetime.getTime() })
        }
    })
}

/*========================================>( 钩子 )<========================================*/
show.value = true
</script>
<template>
    <el-dialog title="生成指定时间戳" v-model="show" width="35%" @close="cancel" destroy-on-close draggable overflow>
        <el-form ref="domTimestampForm" :model="timestampForm" :rules="_rules" label-width="80px">
            <el-form-item label="目标日期" prop="datetime" required>
                <el-date-picker v-model="timestampForm.datetime" type="datetime"
                    placeholder="选择目标日期时间"></el-date-picker>
            </el-form-item>
        </el-form>
        <div class="dialog-footer">
            <el-button icon="Refresh" @click="resetForm">重置</el-button>
            <el-button icon="Check" type="primary" @click="handleSubmit()">确
                定</el-button>
        </div>
    </el-dialog>
</template>
<style lang="scss"></style>
<style lang="scss" scoped></style>